<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-card class="mb10">
          <div slot="header" class="clearfix">
            <span>挑拣信息</span>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="任务编号" prop="taskNo">
                  <el-input v-model="form.pickNo" placeholder="请输入任务编号" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="仓库" prop="storeId">
                  <treeselect v-model="form.storeId" :options="storeOptions" :show-count="true" placeholder="管理部门"
                    size="small" :appendToBody="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库区" prop="areaId">
                    <el-select v-model="form.areaId" placeholder="请选择库区">
                      <el-option v-for="item in storeAreaOptions" :key="item.id" :label="item.name"
                        :value="item.id" />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="挑拣员" prop="operator">
                  <el-select v-model="form.operator" placeholder="请选择挑拣员" style="width: 100%;">
                    <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName"
                      :value="item.userId" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
               <el-col>
                 <el-form-item label="备注" prop="memo">
                   <el-input v-model="form.memo" type="textarea" placeholder="请输入内容" />
                 </el-form-item>
               </el-col>
             </el-row>
          </el-form>
        </el-card>
         <pick-active v-model="formItems" :putTaskId="form.id"></pick-active>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
  import { initBean,addPick,updatePick,getPick } from "@/api/wms/pick";
  import { storeTreeselect } from "@/api/wms/store";
  import {listStoreArea} from "@/api/wms/storeArea"
  import { treeselect } from "@/api/system/dept";
  import { listUser } from "@/api/system/user"
  import {listBox} from "@/api/oms/box"
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    dicts: ['wms_pick_task_status'],
    components: {
      Treeselect
    },
    data() {
      return {
        form: {},
        rules: {
          storeId: [
            { required: true, message: "请选择仓库", trigger: "blur" }
          ],
          areaId: [
            { required: true, message: "请选择库区", trigger: "blur" }
          ],
          operator: [
            { required: true, message: "请选择挑拣员", trigger: "blur" }
          ],
        },
        packForm:{
          boxId:undefined,
          boxNo:undefined,
          items:[]
        },

        //部门数据
        deptOptions: [],
        //上架员数据
        userOptions:[],
        //选中数据
        selectionList:[],
        //移除的货箱信息
        delBoxIds:[],
        //可用货箱数据
        boxOptions:[],
        //仓库数据
        storeOptions:[],
        storeAreaOptions:[],

        pack:false,
        title:'选择货箱',
        buttonLoading:false,

        formItems:[]
      }
    },
    created() {
      this.getInitBean();
      this.getTreeselect();
      this.getStoreTreeselect();
      this.getUsers();
    },
    watch: {

    },
    methods: {
      getInitBean() {
        const wid = this.$router.currentRoute.params.wid;
        initBean({
          wid: wid
        }).then(response => {
          this.form = response.data;
          console.info('response===>',response)
          this.getStoreArea(response.data.storeId)
          this.formItems = this.dtl2BoxNo(this.form.items,item=>item.boxNo)
          const id = this.$router.currentRoute.params.id;
          if(id){
            this.getInfo(id);
          }
        })
      },
      getInfo(id){
        getPick(id).then(response=>{
          this.form = response.data;
          console.info('form===>',this.form)
          this.formItems = this.dtl2Box(this.form.items,item=>item.boxId)
          this.getStoreArea(response.data.storeId)
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      getStoreArea(storeId){
        listStoreArea({storeId:storeId}).then(response=>{
          this.storeAreaOptions = response.rows;
        })
      },
      /** 查询用户数据 */
      getUsers() {
        listUser({
          'userType': 'sys_user',
          'deptId': this.form.deptId,
          'postCode':'Picker,PutTasker'
        }).then(response => {
          this.userOptions = response.rows
        })
      },

      //取消
      cancel(){
        this.pack = false;
        this.selectionList = [];
      },
      /** 提交按钮 */
      submitForm() {
        let boxResult = this.boxNo2Dtl(this.formItems);
        this.form.items = boxResult[0];
        this.form.boxList = boxResult[1];
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updatePick(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              let formItems = this.form.items;
              let flag = true;
              let putFlag = true;
              formItems.forEach(item=>{
                if(item.isPwd){
                  if(!item.password){
                    flag = false;
                  }
                }
                if(item.isPutPwd){
                  if(!item.confirmPwd){
                    putFlag = false;
                  }
                }
              })
              if(!flag){
                 this.$modal.msg("请输入保险密码");
                 return false;
              }
              if(!putFlag){
                 this.$modal.msg("请输入上架密码");
                 return false;
              }
              addPick(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 关闭 */
      close(){
        const obj = {
          path: "/wms/pick",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },

    }
  }
</script>

<style>
</style>
